<template>
  <div class="admin">
    <div class="left">
      <div class="logo">
        <!--                <img src="../../assets/logo1.png" alt="">-->
        <p>招投标比价系统</p>
      </div>
      <div class="nav">
        <div class="ts">主导航</div>
        <div :class="activeIndex == 0 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <House />
            </el-icon>
          </div>

          <p>首页</p>
        </div>

        <!--                -->
        <div class="ts">采购管理</div>
        <div :class="activeIndex == 1 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <Operation />
            </el-icon>
          </div>

          <p>招标管理</p>
        </div>

        <div :class="activeIndex == 2 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <CircleCheck />
            </el-icon>
          </div>

          <p>议价列表</p>
        </div>

        <div :class="activeIndex == 2 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <PieChart />
            </el-icon>
          </div>

          <p>供应商管理</p>
        </div>
        <div :class="activeIndex == 3 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <ChatLineRound />
            </el-icon>
          </div>

          <p>消息中心</p>
        </div>

        <!--                -->
        <div class="ts">系统设置</div>
        <div :class="activeIndex == 1 ? 'navitem active' : 'navitem'">
          <div class="icon">
            <el-icon>
              <User />
            </el-icon>
          </div>

          <p>个人页面</p>
        </div>

        <!--                -->
      </div>
    </div>
    <div class="Hometop">
      <div class="top-menu">
        <p>首页</p>
        <div class="userinfo">
          <el-popover :visible="visible" :width="60" placement="top">
            <div
              class="Fit-menu"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <!--                            <div class="Fit-menuItem">个人资料</div>-->
              <div class="Fit-menuItem" @click="GetLoginOut()">退出登录</div>

              <el-button
                size="small"
                type="primary"
                text
                style="height: 30px"
                @click="visible = false"
                >关闭</el-button
              >
            </div>
            <template #reference>
              <div class="avatarUrl" @click="visible = true">
                <el-avatar
                  :size="40"
                  shape="square"
                  src="http://vue.ruoyi.vip/static/img/profile.473f5971.jpg"
                ></el-avatar>
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>


<script setup>
/**
 * 组件引入
 */
import { onMounted, reactive, ref, computed } from "vue";
import http from "../../api/api.js";
import msg from "../../utils/Message.js";
import Cookies from "js-cookie";
import { useRouter } from "vue-router";

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const router = useRouter();

const activeIndex = ref(0);

const visible = ref(false);

// 全局数据
var navlist = ref([
  {
    title: "个人主页",
    url: "/myindex",
  },
  {
    title: "我的投标",
    url: "/mybid",
  },
  {
    title: "我的收藏",
    url: "/mycollect",
  },
  {
    title: "浏览足迹",
    url: "/mylog",
  },
  {
    title: "账户设置",
    url: "/myaccount",
  },
]);

/**
 * 页面挂载后
 */
onMounted(() => {
  isLogin();
});

/**
 * 计算属性
 */

/**
 * 方法区
 */

// 是否登录
const isLogin = () => {
  const token = Cookies.get("token");
  if (!token) {
    msg.message("您未登录，请登录", "error");
  }
};

//跳转路由
function GetLinkUrl(item, index) {
  activeIndex.value = index;
  router.push(item.url);
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
</style>

